<template>
	<view class="freeTest">
		<!-- 导航栏 -->
		<navBar :backFont="true" :title="'自由练习'" >
			<template #right_btn>
				<view class="right_btn">
					<text>查看使用量</text>
					<uni-icons class="right_arrow" type="right" ></uni-icons>
				</view>
			</template>
		</navBar>	
		
		<view class="projects_card">
			<freeTestCard @click="click_popup('立定跳远',0)" :badge="badge_1" :imgUrl="'../../static/icons/long-jump.png'" :title="'立定跳远'">
			</freeTestCard>
			<freeTestCard @click="click_popup('引体向上',1)" :badge="badge_2" :imgUrl="'../../static/icons/pull-up.png'" :title="'引体向上'">
			</freeTestCard>
			<freeTestCard @click="click_popup('仰卧起坐',2)" :badge="badge_3" :imgUrl="'../../static/icons/sit-up.png'" :title="'仰卧起坐'">
			</freeTestCard>
			<freeTestCard @click="click_popup('跳绳',3)"  :badge="badge_4" :imgUrl="'../../static/icons/jump-rope.png'" :title="'跳绳'">
			</freeTestCard>
			<freeTestCard @click="click_popup('实心球',4)" :badge="badge_5"  :imgUrl="'../../static/icons/shot-put.png'" :title="'实心球'">
			</freeTestCard>
			<freeTestCard @click="click_popup('100米',5)" :badge="badge_6"  :imgUrl="'../../static/icons/100-meter-dash.png'" :title="'100米'">
			</freeTestCard>
		</view>
		<button class="close_btn" @click="close_all">一键关闭</button>
		<view>
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup_con">
					<view class="title_popup">
						<text>{{sportsType}}</text>
					</view>
					<view class="popup-content" >
						<view class="tips_con">
							<text class="open_font">已开启</text>
							<text class="area_font">区域A</text>
						</view>
						<view class="tips_con">
							<text class="ing_font">占用中</text>
							<text class="area_font">区域B</text>
						</view>
						<view class="tips_con">
							<text class="disable_font">不可用</text>
							<text class="area_font">区域C</text>
						</view>
					</view>	
					<myBtn class="popup_btn" @click="close_popup" title="确认开启" color="#0aa1ed" width="15vw" height="6vh"></myBtn>
				</view>
				
			</uni-popup>	
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive } from "vue";
	
	let popup = ref(null)
	let sportsType:any = ref('')
	let click_popup = (sports:any,index:number)=>{
		sportsType.value=sports
		popup.value.open("center")
		currentIndex = index
	}
	let badge_1 = ref(false)
	let badge_2 = ref(false)
	let badge_3 = ref(false)
	let badge_4 = ref(false)
	let badge_5 = ref(false)
	let badge_6 = ref(false)
	let currentIndex:number
	let close_popup = ()=>{
		if(currentIndex == 0){
			badge_1.value = true
		}else if(currentIndex == 1){
			badge_2.value = true
		}else if(currentIndex == 2){
			badge_3.value = true
		}else if(currentIndex == 3){
			badge_4.value = true
		}else if(currentIndex == 4){
			badge_5.value = true
		}else if(currentIndex == 5){
			badge_6.value = true
		}
		popup.value.close()
	}
	let close_all = ()=>{
		badge_1.value = false 
		badge_2.value = false 
		badge_3.value = false 
		badge_4.value = false 
		badge_5.value = false 
		badge_6.value = false 
		uni.showToast({
			title:'已全部关闭',
			icon:'none'
		})
	}
	// const goMethod = (type:any) => {
	// 	console.log('我去了这里');
	// 	uni.navigateTo({
	// 		url:'/pages/goTest/goTest?type='+type,
	// 	})
	// }
</script>

<style>
	.freeTest{
		padding-top: 11vh;
	}
	.right_btn{
		display: flex;
		align-items: center;
		color: #0aa1ed;
	}
	.triangle {
		 width: 0;
		 height: 0;
		 border-top: 2vw solid transparent;
		 border-right: 1vw solid transparent;
		 border-left: 2vw solid red;
	 }
	 .right_arrow{
		 color: #0aa1ed !important;
	 }
	 .projects_card{
		 margin-top: 5vh;
		 display: flex;
		 justify-content: space-evenly;
		 flex-wrap: wrap;
	 }
	 .close_btn{
		 width: 30vw;
		 border-radius: 4vh;
		 border: none;
		 color: white;
		 background-color: #00aaff;
		 margin-top: 5vh;
	 }
	 .popup_con{
		 width: 40vw;
		 height: 50vh;
		 display: flex;
		 flex-direction: column;
	 }
	 .title_popup{
		 width: 100%;
		 text-align: center;
		 padding: 3vh 0;
		 border-bottom: 1px solid #f8f8f8;
		 margin-bottom: 4vh;
	 }
	 .popup-content{
		 width: 40vw;
		 display: flex;
		 flex-direction: column;
		 justify-content: space-evenly;
		 align-items: center;
	 }
	 .tips_con{
		 width: 50%;
		 display: flex;
		 align-items: center;
		 justify-content: space-around;
		 height: 7vh;
	 }
	 .open_font{
		 display: block;
		 color: #fff;
		 background-color: #0aa1ed;
		 padding: 0.5vw ;
		 box-sizing: border-box;
		 border-radius: 0.5vw;
	 }
	 .ing_font{
		 display: block;
		 color: #fff;
		 background-color: #76d289;
		 padding: 0.5vw ;
		 box-sizing: border-box;
		 border-radius: 0.5vw;
	 }
	 .disable_font{
		 display: block;
		 color: #fff;
		 background-color: #e4ba51;
		 padding: 0.5vw ;
		 box-sizing: border-box;
		 border-radius: 0.5vw;
	 }
	 .area_font{
		 color: #aaa;
	 }
	 .popup_btn{
		 margin: 0 auto;
		 margin-top: 5vh;
	 }
</style>